<template>
  <div class="col card p10" style="align-items: flex-end;">
    <label class="title">清洗设置</label>
    <div class="row_center mt">
      <label>放水策略</label>
      <el-select class="ml" v-model="ctx.water" style="width: 120px;">
        <el-option
          :label="TANK1"
          :value="TANK1"
          />
        <el-option
          :label="TANK2"
          :value="TANK2"
          />
        <el-option
          :label="TANK1_2"
          :value="TANK1_2"
          />
        <el-option
          :label="AUTO"
          :value="AUTO"
          />
      </el-select>
    </div>
    <div class="row_center mt">
      <label>蒸汽策略</label>
      <el-select class="ml" v-model="ctx.steam" style="width: 120px;">
        <el-option
          :label="TANK1"
          :value="TANK1"
          />
        <el-option
          :label="TANK2"
          :value="TANK2"
          />
        <el-option
          :label="TANK1_2"
          :value="TANK1_2"
          />
        <el-option
          :label="AUTO"
          :value="AUTO"
          />
      </el-select>
    </div>
    <div class="row_center mt">
      <label>c</label>
      <el-input class="ml" v-model="ctx.c" style="width: 120px;"/>
    </div>
    <div class="row_center mt">
      <label>放水体积</label>
      <el-input class="ml" v-model="ctx.water_volume" style="width: 120px;"/>
    </div>
    <div class="row_center mt">
      <label>d</label>
      <el-input class="ml" v-model="ctx.d" style="width: 120px;"/>
    </div>
    <div class="row_center mt">
      <label>蒸汽时间</label>
      <el-input class="ml" v-model="ctx.steam_time" style="width: 120px;"/>
    </div>
    <div class="row_center mt" style="align-self: center;">
      <el-button @click="onClickClean" type="primary">清洗</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { dialog } from '../../service/ui';
import { CleanOption, TankOption, TankProxy, clean } from '../../service/heat_cmd';


const TANK1 = "热水罐1";
const TANK2 = "热水罐2";
const TANK1_2 = "热水罐1和2";
const AUTO = "自动";

interface Ctx {
  water: string,
  steam: string,
  c: string,
  water_volume: string,
  d: string,
  steam_time: string,
}

const ctx = reactive<Ctx>({
  water: AUTO,
  steam: AUTO,
  c: "190",
  water_volume: "50",
  d: "200",
  steam_time: "5",
});

async function onClickClean() {
  try {
    let tank: TankOption = {
      water: TankProxy.AUTO,
      steam: TankProxy.AUTO,
    };
    
    if (ctx.water == TANK1) {
      tank.water = TankProxy.TANK1;
    } else if (ctx.water == TANK2) {
      tank.water = TankProxy.TANK2;
    } else if (ctx.water == TANK1_2) {
      tank.water = TankProxy.TANK1;
    }

    if (ctx.steam == TANK1) {
      tank.steam = TankProxy.TANK1;
    } else if (ctx.steam == TANK2) {
      tank.steam = TankProxy.TANK2;
    } else if (ctx.steam == TANK1_2) {
      tank.steam = TankProxy.TANK1_2;
    }

    const option: CleanOption = {
      c: parseInt(ctx.c),
      water: parseInt(ctx.water_volume),
      d: parseInt(ctx.d),
      steam: parseInt(ctx.steam_time),
    };
    console.log(option);
    await clean(tank, option);

    dialog.succ('清洗完成');
  } catch (msg) {
    dialog.err(msg);
  }
}


</script>
